<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="dahuiji.css" />
	<script>
		window.onload = function(){
			 engin = new Engine();
		}
		function Engine(){
			this.ele = document.getElementById("body_main");
			this.init();
		}
		Engine.prototype.init = function(){
			var aLi = this.ele.children[0].children;
			var that = this;
			for(var i = 0 ; i < aLi.length; i++){//给初始选项添加事件;

				aLi[i].index = i;
				aLi[i].onclick = function(){
					this.parentNode.remove();
					that.animate();
					that.frequency = this.index;
				}
			}
		}
		Engine.prototype.animate = function(){
			this.logo = createEle("logo","div")
			appendBody(this.logo);
			this.loding = createEle("loading","div");
			appendBody(this.loding)
			var that = this;
			var index = 0;
			var timerLoading = setInterval(function(){
				that.loding.style.background = "url(images/loading"+( ++index % 3 + 1) +".png) no-repeat"

			}, 500);
			var positionY = 0;
			setInterval(function(){
				positionY += 5;
				that.ele.style.backgroundPositionY =  positionY + "px";
			}, 50);
			//要让所有动画元素退场;
			setTimeout(function(){
				that.logo.remove();
				that.loding.remove();
				clearInterval(timerLoading);
				that.gameStart();
			}, 1000);
		}
		Engine.prototype.gameStart = function(){
			//飞机入场;
			plane.init(this);
			plane.fire(this.frequency);
			this.createEnemy();
		}
		Engine.prototype.createEnemy = function(){
			setInterval(function(){
				Math.random() > 0.5 ? new Enemy(0) : "";//随机概率产生敌机;
			}, 500);
			setInterval(function(){
				Math.random() > 0.5 ? new Enemy(1) : "";//随机概率产生敌机;
			}, 3000);
			setInterval(function(){
				Math.random() > 0.2 ? new Enemy(2) : "";//随机概率产生敌机;
			}, 8000);
		}
		function Enemy(type){
			this.type = type;
			this.init()
		}
		Enemy.prototype.init = function(){

			switch(this.type){
				case 0: this.ele = createEle("enemy-small","div");
						this.hp = 1;
						this.speed = 10;
						break;
				case 1: this.ele = createEle("enemy-middle","div");
						this.hp = 5;
						this.speed = 8;
						break;
				case 2: this.ele = createEle("enemy-large","div");
						this.hp = 50;
						this.speed = 2;
						break;
			}
			appendBody(this.ele);
			this.position();
		}	
		Enemy.prototype.position = function(){
			//飞机定位;
			var body_main = document.getElementById("body_main");
			this.ele.style.top = 0;
			this.ele.style.left = randomInt(body_main.offsetLeft,body_main.offsetLeft+body_main.offsetWidth - this.ele.offsetWidth) + "px";
			this.move();
		}
		Enemy.prototype.move = function(){
			var that = this;
			this.timer = setInterval(function(){
				that.ele.style.top = that.ele.offsetTop + that.speed + "px";
				that.collision();//碰撞检测;
				//敌机每次移动 去检测碰撞;
				if(that.ele.offsetTop >= document.documentElement.clientHeight){
					that.ele.remove();
					clearInterval(that.timer);
				}
			}, 30);
		}
		Enemy.prototype.collision = function(){
			//敌机子弹碰撞检测;
			for(var i = 0 ; i < plane.bullet.length; i++){
				//top 值判断;
				if( Math.abs(this.ele.offsetTop - plane.bullet[i].ele.offsetTop) >= 0 && Math.abs(plane.bullet[i].ele.offsetTop - this.ele.offsetTop) <= this.ele.offsetHeight){
					//left值判断;	
					if(Math.abs(this.ele.offsetLeft - plane.bullet[i].ele.offsetLeft) >= 0 && Math.abs(this.ele.offsetLeft - plane.bullet[i].ele.offsetLeft) <= this.ele.offsetWidth){
						//碰撞
						//console.log("碰撞");
						plane.bullet[i].boom();
						this.hp -- ;
						
						if(this.hp <= 0){
							this.ele.remove();
							clearInterval(this.timer);
						}

					}
				}
			}
			//敌我飞机碰撞检测;
			if( Math.abs(this.ele.offsetTop - plane.ele.offsetTop) >= 0 && Math.abs(plane.ele.offsetTop - this.ele.offsetTop) <= this.ele.offsetHeight){
					//left值判断;	
					if(Math.abs(this.ele.offsetLeft - plane.ele.offsetLeft) >= 0 && Math.abs(this.ele.offsetLeft - plane.ele.offsetLeft) <= this.ele.offsetWidth){
						//碰撞
						//console.log("碰撞");
						var restart = confirm("是否重新开始游戏");
						if(restart){
							location.reload();
						}else{
							close();
						}
					}
				}
		}
		var plane = {
			ele:createEle("my-warplain","div"),
			init:function(engine){
				this.engine = engine.ele;
				console.log(this.engine)
				//创建一个飞机元素;
				//飞机元素初始定位;
				var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
				var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
				appendBody(this.ele);
				this.ele.style.left = clientWidth / 2 - this.ele.offsetWidth / 2 + "px";
				this.ele.style.top = clientHeight - this.ele.offsetHeight + "px";
				//飞机事件;
				this.planeMove()				
			},
			planeMove:function(){
				var that = this;
				document.onmousemove = function(event){
					var evt = event || window.event;
					var left = evt.clientX - that.ele.offsetWidth / 2;
					var top = evt.clientY - that.ele.offsetHeight/2;
					//左右边界检测;
					if(left <= that.engine.offsetLeft){
						left = that.engine.offsetLeft;
					}
					if(left >= that.engine.offsetLeft + that.engine.offsetWidth - that.ele.offsetWidth){
						left = that.engine.offsetLeft + that.engine.offsetWidth - that.ele.offsetWidth;
					}
					that.ele.style.left = left + "px";
					that.ele.style.top = top + "px";
				}
			},
			fire:function(frequency){//频率
				var frequencyMS = 200;//发射子弹频率，毫秒数;
				switch(frequency){
					case 0:frequencyMS = 500;break;
					case 1:frequencyMS = 400;break;
					case 2:frequencyMS = 200;break;
					case 3:frequencyMS = 50;break;
				}
				//开火!;
				var bulletId = 0;
				var that = this;
				setInterval(function(){
					//创建子弹;
					that.bullet.push(new Bullet(bulletId));
					//console.log(that.bullet);
					bulletId ++;
				},frequencyMS);
			},
			bullet:[]
		}
		function Bullet(id){ //子弹;
			this.ele = createEle("bullet","div");
			this.id = id;
			this.init();
		}
		Bullet.prototype.init = function(){
			this.ele.id = this.id;
			//子弹入场定位;
			appendBody(this.ele);
			this.ele.style.left = plane.ele.offsetLeft + plane.ele.offsetWidth / 2 - this.ele.offsetWidth / 2 + "px";
			this.ele.style.top = plane.ele.offsetTop - this.ele.offsetHeight + "px";
			this.move();
		}
		Bullet.prototype.move = function(){
			var that = this;
			this.timer = setInterval(function(){
				that.ele.style.top = that.ele.offsetTop - 15 + "px";
				if(that.ele.offsetTop <= 10){
						that.boom();
				}
			}, 50);
		}
		Bullet.prototype.boom = function(){ //清除子弹定时器，清除子弹DOM;
			this.ele.className = "bullet_die";
			clearInterval(this.timer);
			var that = this;
			setTimeout(function(){
				that.ele.remove();
				for(var i = 0 ; i < plane.bullet.length; i++){
					if(that.ele.id == plane.bullet[i].id){
						plane.bullet.splice(i,1);//清空飞机子弹数组中的多余项;
					}
				}
			}, 50);			
		}
		/* 组件区 */
		Element.prototype.remove = function(){
			try{
				this.parentNode.removeChild(this);
			}catch(e){

			}
		}
		function createEle(className,target){//创建元素;
			var ele = document.createElement(target);
			ele.className = className;
			return ele;
		}
		function appendBody(ele){
			document.body.appendChild(ele);
		}

		function randomInt(min,max){

			return Math.round((max - min) * Math.random()) + min ;
		}
	</script>
</head>
<body>
	<div id="body_main" class="main">
			<ul id="options" class="options">
				<li value="1">超级困难</li>
				<li value="2">非常困难</li>
				<li value="3">比较困难</li>
				<li value="4">就选我吧</li>
			</ul>
	</div>
</body>
</html>